<template>
  <van-nav-bar
    title="聊天"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <div class="chat-container">
    <div class="chat-messages">
      <div v-for="(message, index) in messages" :key="index" class="message">
        <div :class="['message-content', message.isMe ? 'me' : 'other']">
          {{ message.content }}
        </div>
      </div>
    </div>
    <div class="chat-input">
      <van-field
        v-model="inputMessage"
        placeholder="请输入消息"
        @keyup.enter="sendMessage"
      />
      <van-button type="primary" @click="sendMessage">发送</van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const messages = ref([
  { content: '你好！', isMe: false },
  { content: '你好，很高兴见到你！', isMe: true }
])
const inputMessage = ref('')

const sendMessage = () => {
  if (inputMessage.value.trim()) {
    messages.value.push({ content: inputMessage.value, isMe: true })
    inputMessage.value = ''
  }
}

const onClickLeft = () => {
  history.back()
}
</script>

<style scoped>
.chat-container {
  height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.message {
  margin-bottom: 10px;
}

.message-content {
  max-width: 70%;
  padding: 10px;
  border-radius: 5px;
}

.me {
  margin-left: auto;
  background-color: #95ec69;
}

.other {
  margin-right: auto;
  background-color: #ffffff;
}

.chat-input {
  display: flex;
  padding: 10px;
  background-color: #f7f8fa;
}

.van-field {
  flex: 1;
  margin-right: 10px;
}
</style>